<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="roleList" class="margin-top">
      <el-table-column label="参数类型" prop="paramType" :show-overflow-tooltip="true" />
      <el-table-column label="参数名称" prop="paramName" :show-overflow-tooltip="true" />·
      <el-table-column label="参数描述" prop="paramDesc" width="250" :show-overflow-tooltip="true" />
      <el-table-column label="参数值" prop="paramValue" width="200" :show-overflow-tooltip="true" >
        <template v-slot="scope">
          <div v-if="scope.row.id<5||scope.row.id == 8||scope.row.id == 10">
            <img v-if="scope.row.paramValue" width="150" :src="scope.row.paramValue" alt="">
          </div>
          <div v-else-if="scope.row.id==9">
            <div :style="{width:'60px',height: '35px',background: scope.row.paramValue}"></div>
          </div>
          <div v-else>
            {{ scope.row.paramValue }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" :formatter="$util.YYMM" />
      <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <div>
            <el-button v-preventReClick size="mini" type="text" @click="handleView(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


    <el-dialog title="编辑" :visible.sync="open" width="40%" append-to-body>
      <template v-if="viewStatus == 1">
        <div class="dialogtitle">图片上传</div>
        <el-upload ref="upload" :limit="1" accept=".jpg, .png, .gif" :auto-upload="false" drag :headers="upload.headers"
          :action="upload.url" :data="upload.data" :disabled="upload.isUploading" :on-change="handleFileChange"
          :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将图片拖到此处，或 <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">{{ rowObj.elementDesc || '' }}</div>
        </el-upload>
      </template>
      <template v-else-if="viewStatus == 2">
        <div class="dialogtitle">应用系统名称</div>
        <el-input v-model="viewValue" placeholder="请输入" clearable />
      </template>
      <template v-else-if="viewStatus == 3">
        <div class="dialogtitle">品牌简介</div>
        <el-input type="textarea" v-model="viewValue" placeholder="请输入" maxlength="100" show-word-limit clearable />
      </template>
      <template v-else-if="viewStatus == 4">
        <div class="dialogtitle">主题色</div>
        <el-color-picker v-model="viewValue"></el-color-picker>
        <div>{{ viewValue }}</div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick type="primary" @click="submitForm">确 定</el-button>
        <el-button v-preventReClick @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  elementList,
  elementEdit
} from "@/api/system/views";
import { getAccessToken } from "@/utils/auth";


export default {
  components: {
  },
  name: "UserGroupRole",
  data() {
    return {

      upload: {
        isUploading: false, // 是否禁用上传
        url: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
        headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
        data: {} // 上传的额外数据，用于文件名
      },
      viewStatus: 1,
      rowObj: {},
      viewValue: '',
      open: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      roleList: [],

      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 处理文件上传中 */
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true; // 禁止修改
    },
    /** 处理上传的文件发生变化 */
    handleFileChange(file, fileList) {

    },
    /** 发起文件上传 */
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 文件上传成功处理 */
    handleFileSuccess(response, file, fileList) {
      if (response.code == 0||response.code == 200) {
        // 清理
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        // 提示成功，并刷新
        this.$modal.msgSuccess("图片上传成功");
        this.viewValue = response.data
      }else{
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$modal.msgError(response.msg);
      }

    },
    sleep(ms){
      return new Promise(resolve => setTimeout(resolve, ms));
    },
    async submitForm() {
      let res;
      if(this.viewStatus == 1){
        this.submitFileForm()
        await this.sleep(500)
        this.rowObj.paramValue = this.viewValue
        if(!this.upload.isUploading){
          if(!this.viewValue){
            this.$modal.msgError('请上传图片'); return
          } 
          res = await elementEdit(this.rowObj)
          
        }
      }else{
        this.rowObj.paramValue = this.viewValue
        res = await elementEdit(this.rowObj)
        if(res.code == 0){
          this.$modal.msgSuccess("编辑成功");
        }
        
      }
      if(res.code == 0){
        this.open = false;
        this.getList()
      }
      
      
    },
    getList() {
      this.loading = true;
      elementList(this.queryParams).then(
        response => {
          this.roleList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      ).catch(err => this.loading = false)
    },
    handleView(row) {
      this.rowObj = row;
      this.viewValue = row.paramValue
      this.open = true;
      if(row.id < 5 ||row.id == 8 || row.id == 10){
        this.viewStatus = 1;
      }else if(row.id>4 && row.id<7){
        this.viewStatus = 2;
      }else if(row.id == 7){
        this.viewStatus = 3;
      }else if(row.id == 9){
        this.viewStatus = 4;
      }
      
    },
  }
};
</script>
<style lang="scss" scoped>
.dialogtitle {
  height: 40px;
  line-height: 40px;
}
</style>
  